<template>
  <div class="calendar">
    <div class="boxs">
      <VCalendar />
      <div class="tags">
        <div class="tag-item">
          <div class="top">
            <span class="date">1 Apr,2025</span>
            <div class="icons" />
            <span class="matter">日本语考试</span>
            <div class="person-img">
              <img src="@/assets/pic/s-2.png">
            </div>
            <div class="person-img">
              <img src="@/assets/pic/s-1.png">
            </div>
          </div>
          <div class="bottom">
            Circle - Dashboard, Stats, and UI Kit
          </div>
        </div>
        <div class="tag-item">
          <div class="top">
            <span class="date">1 Apr,2025</span>
            <div class="icons" />
            <span class="matter">日本语考试</span>
            <div class="person-img">
              <img src="@/assets/pic/s-2.png">
            </div>
            <div class="person-img">
              <img src="@/assets/pic/s-1.png">
            </div>
          </div>
          <div class="bottom">
            Circle - Dashboard, Stats, and UI Kit
          </div>
        </div>
        <div class="tag-item">
          <div class="top">
            <span class="date">1 Apr,2025</span>
            <div class="icons" />
            <span class="matter">日本语考试</span>
            <div class="person-img">
              <img src="@/assets/pic/s-2.png">
            </div>
            <div class="person-img">
              <img src="@/assets/pic/s-1.png">
            </div>
          </div>
          <div class="bottom">
            Circle - Dashboard, Stats, and UI Kit
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import 'v-calendar/dist/style.css'
import { defineComponent } from 'vue'
import { Calendar as VCalendar } from 'v-calendar'

export default defineComponent({
  components: {
    VCalendar,
  },
})
</script>

<style lang="scss" scoped>
::v-deep.calendar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .boxs {
    display: flex;

    .tags {
      height: 600px;
      width: 600px;
      background: #FFFFFF;
      border-radius: 0 20px 20px 0;
      border-left: 1px solid #E2E2EA;
      padding: 30px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;

      .tag-item {
        width: 500px;
        height: 90px;
        display: flex;
        flex-direction: column;
        margin-bottom: 30px;
        border-bottom: 1px solid #E2E2EA;
        .top {
          display: flex;
          align-items: center;

          .date {
            font-weight: 400;
            font-size: 16px;
            color: #0f0f0f;
            margin-right: 35px;
          }

          .matter {
            font-size: 16px;
            color: #a4a4a8;
            margin-right: 30px;
          }

          .person-img {
            width: 18px;
            height: 18px;
            margin-right: 15px;
            &>img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          .person-img:last-child{
            margin-right: 0;
          }
        }
        .bottom{
          margin-left: 120px;
          font-size: 14px;
          color: #92929D;
          margin-top: 30px;
        }
      }
      .tag-item:last-child{
        margin-bottom: 0;
      }
    }
  }

  .vc-container {
    width: 800px;
    height: 600px;
  }

  .vc-bordered {
    border: none;
    border-radius: 20px 0px 0px 20px;

    .vc-header {
      margin-top: 40px;
      margin-bottom: 80px;
    }

    .vc-day-content {
      width: 70px;
      height: 70px;
      line-height: 70px;
    }
  }
}
</style>
